<template>
	<view>
		<view class="header-info">
			<view class="" style="width: 80%;display: flex;align-items: center;justify-content: end;">
				<!-- <image @tap="goBack" src="/static/img/videos/xiangzuo.png" mode="aspectFit"
					style="width: 17upx;height: 30upx;"></image> -->
				<div class="zhi_index18" @click="report()"
					style="display: flex;align-items: center;flex-direction: column;">
					<image src="/static/img/videos/jubao-light.png" class="zhi_index19"></image>
					<text class="zhi_index21" style="font-size: 28upx;">举报</text>
				</div>
			</view>

			<image :src="avatar" mode="aspectFill" class="header-info-headimg" />
			<text class="header-info-nickname">{{realname}}</text>
			<view class="header-data">
				<view class="header-data-left">
					<text class="header-data-data">{{oInfo.total1}}</text>
					<text class="header-data-title">关注</text>
				</view>
				<view class="header-data-center">
					<text class="header-data-data">{{oInfo.total2}}</text>
					<text class="header-data-title">粉丝</text>
				</view>
				<view class="header-data-right">
					<text class="header-data-data">{{oInfo.total3}}</text>
					<text class="header-data-title">点赞和收藏</text>
				</view>
			</view>
			<view class="header-info-introduce">{{oInfo.introduction}}</view>
			<view class="header-info-btn" v-if="is_attention ==1" @tap="cancleAttention">已关注</view>
			<view class="header-info-btn" v-else @tap="goAttention">关注</view>
		</view>
		<view class="" style="height: 56upx;border-bottom: #f5f5f5;">

		</view>
		<view class="videos">
			<view class="videos-title">作品</view>
			<view class="video-list" style="margin-top: 20upx;">
				<view class="videos-item" v-for="(item,index) in videosList" :key="index" @tap="goVideosList(index)">

					<image class="avatar" :src="item.cover_img" mode="scaleToFill" style="width: 100%;height: 100%;">
					</image>
					<view class="videos-item-praise">
						<image src="@/static/img/videos/like.png" mode="widthFix" style="width: 28upx;"></image>
						<text style="margin-left: 9upx;color:#ffffff;">{{item.praise_num}}</text>
					</view>
					<view class="" style="width: 0.5%;height: 100%;">

					</view>
				</view>
			</view>
		</view>

		<uni-popup ref="alertDialog1" type="dialog">
			<uni-popup-dialog :type="msgType" title="" content="" @confirm="dialogConfirm1">
				<view class="remember" style="display: flex;">
					确定要取消关注吗？
				</view>
			</uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				index: 0,
				page: 1,
				realname: '佚名',
				avatar: '/static/images/touxiang.png',
				oInfo: {},
				videosList: [],
				totalNum: 0,
				is_attention: 1,
				tuid: 0,
				msgType: 'info',
			}
		},
		onLoad(options) {

			this.tuid = options.tuid;
			this.index = options.index
			this.getInfo();
			this.getVideosList()
		},
		//下拉到底获取新的数据
		onReachBottom() {
			this.getVideosList()
		},
		methods: {
			goBack() {
				uni.navigateBack({
					delta: 1
				});
			},
			async getInfo() {
				let res = await this.$myRequest({
					url: '/video_count',
					methods: "POST",
					data: {
						token: uni.getStorageSync('token'),
						tuid: this.tuid,
					},
				})

				if (res.data.status == 1) {
					this.oInfo = res.data.data
					if (this.oInfo.realname) {
						this.realname = this.oInfo.realname
					}
					if (this.oInfo.avatar) {
						this.avatar = this.oInfo.avatar
					}

					this.is_attention = this.oInfo.is_attention
				}
			},

			async getVideosList() {
				if (this.videosList.length >= this.totalNum && this.totalNum != 0) {
					return false;
				}
				let res = await this.$myRequest({
					url: '/my_vedios',
					methods: "POST",
					data: {
						token: uni.getStorageSync('token'),
						page: this.page,
						tuid: this.tuid,
					},
				})
				if (res.data.status == 1) {
					this.totalNum = res.data.data.totalNum;
					let ndata = res.data.data.list;
					if (this.page === 1) {
						this.videosList = ndata;
						if (ndata.length > 0) {
							this.page = this.page + 1;
						}
					} else {
						if (ndata.length > 0) {
							this.videosList = [...this.videosList, ...ndata];
							this.page = this.page + 1;
						}
					}
				}
			},

			async report() {
				let touid = this.tuid;
				uni.navigateTo({
					url: '/pages/video-resources/video-report?touid=' + touid,
				})
			},

			// 关注
			async goAttention() {
				let res = await this.$myRequest({
					url: '/add_attention',
					methods: 'POST',
					data: {
						token: uni.getStorageSync('token'),
						tuid: this.tuid,
					}
				})
				if (res.data.status == 1) {
					this.is_attention = 1;
					this.getInfo();

					uni.$emit('changeDataItem', {
						index: this.index,
						value: 1
					})
				}
			},

			async cancleAttention() {
				this.$refs.alertDialog1.open();
			},

			async dialogConfirm1() {
				this.$refs.alertDialog1.close();
				let res = await this.$myRequest({
					url: '/del_attention',
					methods: 'POST',
					data: {
						token: uni.getStorageSync('token'),
						tuid: this.tuid,
					}
				})
				if (res.data.status == 1) {
					this.is_attention = 0;
					this.getInfo();

					uni.$emit('changeDataItem', {
						index: this.index,
						value: 0
					})
				}
			},

			goVideosList(index) {
				// #ifndef APP-PLUS
				console.log('/pages/videos/videos-list?tuid=' + this.tuid +
						'&index=' + index)
				uni.navigateTo({
					url: '/pages/videos/videos-list?tuid=' + this.tuid +
						'&index=' + index
				})
				// #endif
				// #ifdef APP-PLUS

				uni.navigateTo({
					url: '/pages/videos/videos-list-app?tuid=' + this.tuid + '&index=' + index
				})
				// #endif
			}
		}
	}
</script>

<style lang="scss" scoped>
	.header-info {
		// #ifndef MP-WEIXIN
		padding-top: 90upx;
		// #endif

		// #ifdef MP-WEIXIN
		padding-top: 160upx;
		// #endif

		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.header-info-headimg {
		width: 194rpx;
		height: 194rpx;
		border-radius: 97rpx;
	}

	.header-info-nickname {
		height: 100upx;
		line-height: 100upx;
		font-size: 32upx;
	}

	.header-data {
		height: 80upx;
		display: flex;
		width: 60%;
		justify-content: space-between;
	}

	.header-data-left,
	.header-data-center,
	.header-data-right {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: 28upx;
	}

	.header-info-introduce {
		color: #8b8e90;
		font-size: 28upx;
		padding: 54upx;
	}

	.header-info-btn {
		height: 88upx;
		width: 428upx;
		background-color: #e80909;
		border-radius: 10upx;
		color: #fff;
		font-size: 30upx;
		display: flex;
		align-items: center;
		justify-content: center;
		letter-spacing: 4upx;
	}

	.zhi_index19 {
		width: 50upx;
		height: 50upx;
	}

	.videos {
		width: 100%;
	}

	.videos-title {
		height: 94upx;
		width: 33%;
		line-height: 94upx;
		color: #e80909;
		border-bottom: solid #e80909 4upx;
		text-align: center;
		margin: 0 auto;
	}

	.videos-item {
		width: 33%;
		height: 330upx;
		float: left;
		position: relative;
		margin-right: 0.5%;

		&:nth-child(3n) {
			margin-right: 0;
		}
	}

	.videos-item-praise {
		position: absolute;
		left: 16upx;
		bottom: 16upx;
	}
</style>